<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/11/2
  Time: 22:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  application.setAttribute("path",path);
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>带选项卡的layui布局容器</title>
  <!--引入layui的基本css文件   layui.css--->
  <link rel="stylesheet" href="${path}/layui/css/layui.css">
  <!---引入layui的基本js文件  layui.js-->
  <script src="${path}/layui/layui.js"></script>
</head>
<body class="layui-layout-body">
<!-- 整个的布局容器  layui-layout-admin 表示该布局容器是一个后台系统布局 -->
<div class="layui-layout layui-layout-admin">
  <!-- 头部标题栏 -->
  <div class="layui-header">
    <ul class="layui-nav">
      <li class="layui-nav-item"><a href="">首页</a></li>
      <li class="layui-nav-item"><a href="">注册</a></li>
      <li class="layui-nav-item"><a href="">登录</a></li>
      <li class="layui-nav-item">
        <a href="">个人中心</a>
        <!--二级菜单栏--->
        <dl class="layui-nav-child">
          <!-- 子菜单项 -->
          <dd><a href="">个人信息</a></dd>
          <dd><a href="">头像设置</a></dd>
          <dd><a href="">修改密码</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  <!-- 左侧菜单栏 -->
  <div class="layui-side layui-bg-black">
    <!-- 左侧垂直导航 加上class: layui-nav-tree -->
    <ul class="layui-nav layui-nav-tree">
      <li class="layui-nav-item"><a href="">首页</a></li>
      <!-- 员工管理  -->

      <li class="layui-nav-item">
        <a href="javascript:void(0);">数据统计</a>
        <!--二级菜单栏--->
        <dl class="layui-nav-child">
          <!-- 子菜单项 -->
          <dd><a href="#" data-url="${path}/count/empSal" tab_id="123">员工薪资统计</a></dd>
          <dd><a href="#" data-url="${path}/count/deptSal" tab_id="321">部门总薪资统计</a></dd>
          <dd><a href="#" data-url="${path}/count/deptNum" tab_id="333">部门人数统计</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  <div class="layui-body">
    <!--整体选项卡模块  lay-filter 相当于layui的ID选择器 -->
    <div class="layui-tab" lay-filter="mytab" lay-allowClose="true">
      <!--        选项卡标题部分
          lay-filter 作用类似于id
          lay-allowClose 表明允许选项卡关闭
      -->
      <ul class="layui-tab-title">
        <li class="layui-this">
          <i class="layui-icon">
            &#xe620;<cite>首页</cite>
          </i>
        </li>
      </ul>
      <!--   选项卡显示内容部分 -->
      <div class="layui-tab-content" style="min-height: 800px;border: none">
        <!--   每一个选项卡对应的页面
            layui-show 代表当前内容主体区域正在显示这个选项卡的内容--->
        <div class="layui-tab-item layui-show" style="height:1000px">
          <iframe src="t01/index.html" style="width: 100%;height:100%" frameborder='0' marginwidth="0" marginheight="0"></iframe>
        </div>
      </div>
    </div>
  </div>
  <div class="layui-footer">底部信息</div>
</div>
</body>
<script>
  //加载了layui中的jquery、element模块
  layui.use(['jquery','element'],function(){
    //获取layui中的jquery模块和element模块
    var $ = layui.jquery;
    var element = layui.element;
    //给文档中的a标签绑定单击事件
    $(document).on('click', 'a', function() {
      //判断当前点击的a标签，是否拥有tab_id属性
      if(!$(this)[0].hasAttribute("tab_id") || $(this).attr("tab_id") === '') {
        return; //结束当前函数
      }
      //获取tab_id
      var layid = $(this).attr("tab_id");
      //获取导航文本
      var text = $(this).text();
      //获取链接的url
      var dataurl = $(this).attr("data-url");
      //获取所有选项卡标题  li的dom元素对象
      var tabs = $(".layui-tab-title").children();
      //标识
      var msg = true;
      //查找是否有相同的匹配选项卡
      $.each(tabs, function(i, item) {
        var tabid = $(item).attr("lay-id");
        if(tabid === layid) {
          msg = false;
          return false;
        }
      });
      //如果没有存在对应页面的选项卡
      if(msg) {
        //添加选项卡   'mytab' 对应前面元素的 lay-filter
        element.tabAdd('mytab', {
          title: text,   //选项卡的标题
          content: "<div class='layui-fluid'><iframe frameborder='0' style='width:100%;height:800px' src='"
                  + dataurl + "'></iframe></div>",
          id: layid
        });
      }
      //resize();
      //切换到对应的选项卡内容
      element.tabChange('mytab', layid);
    });
  });
</script>
</html>
